<template>
	<div class="ds-context-menu-section" v-show="props.display" :style="{	top: props.position.y + 'px',left: props.position.x + 'px'}">
		<div class="ds-context-menu">
			<ul>
				<li	v-for="item in list" :key="item.id" :class="{ disabled: item.disabled, divide: item.type == 'divide', 'list-item': item.type !== 'divide' }" @mousedown="onClick(item)"	>
					<div class="ds-context-menu-item">
						<i v-show="item.type!='divide'" class="icon" :class="item.icon" aria-hidden="true"></i>
						<span>{{ item.text }}</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script setup>
	import {defineProps,reactive,onMounted,computed,watch} from 'vue';
	import RouterUtil from '@/utils/RouterUtil.js';
	import coreStore from '../stores/core.js';
	import WidgetUtil from '../utils/WidgetUtil.js';
	
	const $coreStore = coreStore();
	
	const props = defineProps({
		display:{
			type:Boolean,
			default:false
		},
		position:{
			type:Object,
			default:{x:0,y:0}
		}
	});
	const data = reactive({
			icon: [
				{
					id: '1',
					text: '打开',
					type: 'default',
					disabled: false,
					icon:'',
					linkId: '',
					action: ''
				},
				{
					type: 'divide'
				},
				{
					id: '2',
					text: '帮助',
					type: 'default',
					disabled: false,
					icon:'',
					linkId: '9999',
					action: ''
				}
			],
			wall: [
				{
					id: '1',
					text: '关于',
					type: 'default',
					disabled: false,
					icon:'about',
					linkId: '0000',
					action: ''
				},
				{
					id: '2',
					text: '刷新',
					type: 'default',
					disabled: false,
					icon:'',
					linkId: '',
					action: ()=> {
						window.location.reload();
					}
				},
				{
					id: '3',
					text: '帮助',
					type: 'default',
					disabled: false,
					icon:'help',
					linkId: '9999',
					action: ''
				},
				{
					type: 'divide'
				},
				{
					id: '4',
					text: '锁屏',
					type: 'default',
					icon:'lock',
					disabled: false,
					linkId: '',
					action: ()=> {
						RouterUtil.quit();
					}
				},
				{
					id: '5',
					text: '设置',
					type: 'default',
					icon:'system',
					disabled: false,
					linkId: '0001',
					action: ''
				},
				{
					id: '6',
					text: WidgetUtil.isFullscreen() ? '退出全屏':'全屏',
					type: 'default',
					icon:'screen',
					disabled: false,
					linkId: '0001',
					action: function() {
						WidgetUtil.fullScreen();
					}
				}
			]
		});
	
	onMounted(()=>{
		console.log("-> init ContextMenu");
	});
	
	watch(props, (newVal, oldVal) => {
		let object = data.wall.filter(t => t.id == '6')[0];
		object.text = WidgetUtil.isFullscreen() ? '退出全屏':'全屏';
	});
	
	const list = computed(()=> {
		if ($coreStore.contextMenu.type ==='wall') {
			return data.wall;
		} else {
			return data.icon;
		}
	});
	
	const onClick=function(item) {
		let data = $coreStore.contextMenu.data;
		$coreStore.closeContextMenu();
		if(typeof(item.action) == 'function') {
			item.action(data);
			return ;
		}
		if(!item.linkId == '') {
			$coreStore.openApplication(item.linkId);
		} else {
			$coreStore.openApplication(data.id);
		}
	}
</script>

<style lang="less" scoped>
.ds-context-menu-section {
	position: fixed;
	z-index: 999;
}
.ds-context-menu {
	width: 9rem;
	text-align: left;
	border-style: solid;
	border-width: 0.1rem;
	box-shadow: 2px 2px 10px rgba(12, 67, 101, 0.8);
	ul {
		background: rgba(255, 255, 255, 0.8);
		width: 100%;
		padding: 0.2rem 0;
		margin: 0;
		list-style: none;
		.list-item {
			padding: 0.1rem 0.6rem;
			cursor: default;
			color: #333;
			&:hover {
				background: #4b8de4;
				color: #fff;
			}
			&.disabled {
				color: #999;
			}
			span {
				margin-left: 0.5rem;
			}
		}
		.divide {
			border-top: 1px solid #ccc;
			margin: 5px;
		}
		.icon {
			display: inline-block;
			width: 15px;
			height: 15px;
			background-size: cover;
		}
	}
}
.ds-context-menu-item {
	display: flex;
	flex-wrap: nowrap;
	flex-direction:row;
	justify-content:start;
	align-items: center;
}
</style>
